<template>
  <view>
    <FormRender ref="FRD"></FormRender>
    <view class="floot-btn">
      <u-button @click="submit" :customStyle="cStyle" type="primary" text="保存" shape="circle"></u-button>
    </view>
  </view>
</template>
<script>
export default {
  name: 'FormManage',
  data() {
    return {
      cStyle: {
        width: '80%',
      },
    }
  },
  mounted() {
    const expSchema = {
      sid: '1',
      title: '渲染演示',
      bgurl: 'https://www.lanpiankeji.com/weixinNotify/images/autoform/yy_form_bg.png',
      description: '为了提前准备中五用餐人数，便于食堂备餐。请需要订餐的小伙伴及时进行登记。',
      endtime: '2023-12-31',
      total: 20,
      ismodify: true,
      components: [
        {
          id: '001',
          type: 'textInput',
          model: 'name',
          label: '姓名',
          defaultval: 't1',
          placeholder: '请输入姓名',
          ruletype: 'withoutNum',
        },
        {
          id: '011',
          type: 'textInput',
          model: 'phone',
          label: '手机',
          defaultval: '13800001111',
          placeholder: '请输入手机号',
          ruletype: 'PhoneNum',
        },
        {
          id: '021',
          type: 'textInput',
          model: 'idcard',
          label: '身份证号',
          labelWidth: '70',
          defaultval: '25415219821125651X',
          placeholder: '请输入身份证号',
          ruletype: 'IdCard',
        },

        {
          id: '002',
          type: 'datetime',
          withpop: true,
          model: 'createtime',
          label: '时间',
        },
        {
          id: '003',
          type: 'checkbox',
          model: 'like',
          label: '兴趣爱好',
          labelWidth: '70',
          opts: [
            {
              name: '游泳',
              disabled: false,
            },
            {
              name: '爬山',
              disabled: false,
            },
            {
              name: '更多更多',
              disabled: false,
            },
          ],
        },
        {
          id: '004',
          type: 'radio',
          model: 'dept',
          label: '所属部门',
          defaultval: '行政部',
          labelWidth: '70',
          opts: [
            {
              name: '行政部',
              disabled: true,
            },
            {
              name: '销售部',
              disabled: false,
            },
            {
              name: '后勤部',
              disabled: false,
            },
          ],
        },
        {
          id: '005',
          type: 'upload',
          model: 'picurl',
          label: '照片上传',
          labelWidth: '70',
        },
      ],
    }
    this.$refs.FRD.load(expSchema)
  },
  methods: {
    submit() {
      this.$refs.FRD.getData()
    },
    handleSelectGroup() {
      console.log('call handleSelectGroup')
    },
  },
}
</script>
<style>
.floot-btn {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
}
</style>
